<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>事件监听</button>
    <script>
      // 事件监听可以同时加多个事件
      var btn = document.querySelector('button')
      btn.addEventListener('click', fn2)
      btn.addEventListener('click', fn1)
      function fn1() {
        alert('1')
        // btn.removeEventListener('click', fn1)
        // 注册两个事件，只会移除函数相应的事件
        btn.removeEventListener('click', fn2)
        // 在前面的点击事件移除后面的事件，那么第一次点击后就不会执行后面的事件了
      }
      function fn2() {
        alert('2')
        btn.removeEventListener('click', fn1)
      }
      //   删除事件
    </script>
  </body>
</html>
